<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 靠右的按钮 -->
      <page-tools>
        <template v-slot:after>
          <el-button type="primary" size="small" @click="showEditPerDialog({ type: 'add', id: '0', level: 1 })">添加权限</el-button>
        </template>
      </page-tools>
      <!-- 表格 -->
      <el-table v-loading="loading" border :data="treeList" row-key="id" :row-class-name="rowClass" default-expand-all>
        <el-table-column label="名称" prop="name" />
        <el-table-column align="center" label="标识" prop="code" />
        <el-table-column align="center" label="描述" prop="description" />
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button v-if="row.type === 1" type="text" :disabled="!checkPermission('point-per-add')" @click="showEditPerDialog({ id: row.id, type: 'add', level: 2 })">添加</el-button>
            <el-button type="text" :disabled="!checkPermission('point-per-edit')" @click="showEditPerDialog({ id: row.id, type: 'edit' })">编辑</el-button>
            <el-button type="text" :disabled="!checkPermission('point-dep-del')" @click="deletePermission(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加或者编辑权限的组件 -->
    <edit-permission ref="editPerRef" @get-new-permission="getPermissionList" />
  </div>
</template>

<script>
// 导入逻辑文件
import permission from './permission'
export default {
  // 使用逻辑文件的对象
  ...permission
}
</script>

<style lang="scss" scoped>
// 导入样式文件
@import url('./permission.scss');
</style>
